
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" th:href="@{/lib/layui-v2.6.3/css/layui.css}" media="all">
  <link rel="stylesheet" th:href="@{/css/public.css}" media="all">
</head>
<body>
<div class="layuimini-container">
  <div class="layuimini-main">
      <fieldset class="table-search-fieldset">
          <legend>搜索</legend>
          <div style="margin: 10px 10px 10px 10px">
              <form class="layui-form layui-form-pane" th:action="@{/admin/search}" method="post" >
                  <div class="layui-form-item">
                      <div class="layui-inline">
                          <label class="layui-form-label">用户姓名</label>
                          <div class="layui-input-inline">
                              <th:block th:if="${null != username}">
                                  <input type="text" name="username" th:value="${username}" autocomplete="on" class="layui-input">
                              </th:block>
                              <th:block th:unless="${null != username}">
                                  <input type="text" name="username"  placeholder="输入用户名" autocomplete="on" class="layui-input">
                              </th:block>

                          </div>
                      </div>
                      <div class="layui-inline">
                          <label class="layui-form-label">密码</label>
                          <div class="layui-input-inline">
                              <th:block th:if="${null != password}">
                              <input type="text" name="password" th:value="${password}"autocomplete="on" class="layui-input">
                              </th:block>
                              <th:block th:unless="${null != password}">
                              <input type="text" name="password" placeholder="输入密码" autocomplete="on" class="layui-input">
                              </th:block>

                          </div>
                      </div>

                      <div class="layui-inline">
                          <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                      </div>
                  </div>
              </form>
          </div>
      </fieldset>

    <script type="text/html" id="toolbarDemo">
      <div class="layui-btn-container">
        <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加 </button>
        <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除 </button>
      </div>
    </script>

    <!--<table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>-->
      <table class="layui-table" lay-data="{toolbar: '#toolbarDemo',defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],limits: [10, 15, 20],limit: 10,page: true,skin: 'line'}" id="currentTableId"
             lay-filter="currentTableFilter">
          <thead>
          <tr>
              <th lay-data="{checkbox: true}"></th>
              <th lay-data="{field:'id', width:80, sort: true}">ID</th>
              <th lay-data="{field:'username', width:100,sort: true}">用户名</th>
              <th lay-data="{field:'password', width:100, sort: true}">密码</th>
              <th lay-data="{field:'birthday', width:150, sort: true }">生日</th>
              <th lay-data="{title: '操作', minWidth: 100, toolbar: '#currentTableBar', align: 'center'}">操作</th>
          </tr>
          </thead>
          <tr th:each="user:${userlist}">
              <td></td>
              <td th:text="${user.getId()}"></td>
              <td th:text="${user.getUsername()}"></td>
              <td th:text="${user.getPassword()}"></td>
              <td th:text="${#calendars.format(user.getBirthday(),'yyyy-MM-dd')}"></td>
          </tr>

      </table>
    <script type="text/html" id="currentTableBar">
      <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
      <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
    </script>

  </div>
</div>


<script th:src="@{/lib/layui-v2.6.3/layui.js}"></script>

<script>
    layui.use(['form', 'table'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table;
        // 生成表格
        var tableIns = table.render();
        // 监听搜索操作
        // form.on('submit(data-search-btn)', function (data) {
        //
        //     $.ajax({
        //         url: "/admin/searchj",
        //         // type: 'post',
        //         data:{
        //             username : data.field.username,
        //             password : data.field.password
        //         },
        //         dataType: 'text',
        //         success : function (data) {
        //             console.log(data);
        //             var b = JSON.parse(data);
        //             // layer.alert(data, {
        //             //     title: '最终的搜索信息'
        //             // });
        //
        //             console.log(b.data);
        //             tableIns.reload({page:{curr:1}});
        //             // $(window).on("resize", function () {
        //             //     layer.full(index);
        //             // });
        //         }
        //     });
        //
        // });
        /**
         * toolbar监听事件
         */
        table.on('toolbar(currentTableFilter)', function (obj) {
            if (obj.event === 'add') {  // 监听添加操作
                var index = layer.open({
                    title: '添加用户',
                    type: 2,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: ['80%', '90%'],
                    content: '../page/usertable/add.html'
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
            } else if (obj.event === 'delete') {  // 监听删除操作
                // 批量删除
                var checkStatus = table.checkStatus('currentTableId')
                    , data = checkStatus.data;
                var userId="";
                if(data.length>0){
                    for (var i in data){
                        userId+=data[i].id+",";
                    }
                }
                layer.confirm('确定删除选中的用户？',{title:'提示信息'},function (index) {
                    $.post('/user/deleteAll/'+userId,
                        {
                        },
                        function(res) {
                            if(res.code===200){
                                layer.close(index);
                                // 重新加载页面
                                window.location.reload();
                            }else {
                                alert("操作失败")
                            }
                        })
                })
                layer.close();
            }
        });

        //监听表格复选框选择
        table.on('checkbox(currentTableFilter)', function (obj) {
            console.log(obj)
        });

        table.on('tool(currentTableFilter)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                var index = layer.open({
                    title: '编辑用户',
                    type: 2,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: ['80%', '90%'],
                    content: '../page/usertable/edit.html?id='+data.id
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
                return false;
            } else if (obj.event === 'delete') {
                layer.confirm('真的删除行么', function (index) {
                    //发起删除请求
                    $.get("/user/"+data.id+"/delete",{},function (res) {
                        if (res.code===200){
                            layer.close(index);
                            // 重新加载页面
                            window.location.reload();
                        }else{
                            alert("删除失败")
                        }
                    })

                });
            }
        });

    });
</script>
</body>
</html>
